<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>请选择消息发布人 信息将会一同发布至其邮箱</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                <template>
                    <el-transfer
                            :titles="['联系人','发送对象']"
                            filterable
                            filter-placeholder="输入人员姓名搜索"
                            v-model="value"
                            :data="data">
                    </el-transfer>
                </template>
            </div>
            <div class="plugins-tips">
                <template>
                    <el-input v-model="title" placeholder="请输入标题"></el-input>
                </template>
            </div>
            <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
            <el-button class="editor-btn" type="primary" @click="submit">发布</el-button>
        </div>
    </div>
</template>

<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import service from "../../utils/request";

    export default {
        name: 'markdown',
        data() {
            return {
                title: '',
                content: '',
                html: '',
                configs: {},
                data: [],
                value: []
            }
        },
        components: {
            mavonEditor
        }, created() {
            this.getPerson()
        },
        methods: {
            //获取用户数据
            getPerson() {
                service.get("/users/getAllUsers").then(res => {
                    console.log(res.message)
                    res.message.forEach((info) => {
                        this.data.push({
                            label: info.name,
                            key: info.id,
                        })
                    })
                })
            },
            // 将图片上传到服务器，返回地址替换到md中
            $imgAdd(pos, $file) {
                let formData = new FormData();
                formData.append('file', $file);
                service.request({
                    url: '/upload/file',
                    method: 'post',
                    data: formData,
                    headers: {'Content-Type': 'multipart/form-data'},
                }).then((url) => {
                    this.$refs.md.$img2Url(pos, url);
                })
            },
            change(value, render) {
                // render 为 markdown 解析后的结果
                this.html = render;
            },
            submit() {
                if (this.title == '' || this.html == '') {
                    this.$message.error("标题或内容不能为空")
                    return;
                }
                service.get('/users/check', {
                    params: {
                        userId: JSON.parse(localStorage.getItem("userInfo")).id
                    }
                }).then(res => {
                    if (res === 1) {
                        //員工
                        if (this.value.length <= 0 || this.value === []) {
                            this.$message.error('员工必须选择留言对象')
                            return
                        }
                        this.sendMsg()
                    } else if (res === 2) {
                        //管理员
                        this.sendMsg()
                    }
                })
            }, sendMsg() {
                let formData = new FormData();
                formData.append("title", this.title);
                formData.append("article", this.html)
                formData.append("ids", this.value + '')
                service.post('/upload/article', formData).then(res => {
                    this.$message.success('提交成功！');
                    this.$router.push("/dashboard")
                }).catch(err => {
                    this.$message.error('提交失败！');
                })
            }
        }
    }
</script>
<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
</style>
